<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <h1 class="title">h1</h1>
    <div v-border class="box">
      <p>p</p>
    </div>
    <ul v-border="color" class="menu">
      <li><a>查看</a></li>
      <li><a>查看</a></li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      color: 'orange'
    }
  },
  computed: {
    ...mapGetters(['name'])
  }
}
</script>

<style lang="scss" scoped>
// 1.定义scss变量=>语法：$变量名：css属性值
$red:#225887;
$border:10px solid blue;
// 2.使用变量
.title{
  color:$red;
  border:$border;
}
// ==样式嵌套控制==
// 普通写法
// .box p{
//   font-size:28px;
//   color:$red;
// }
.box{
  p{
    font-size:28px;
    color:$red;
}
.menu{
  li{
    a{
      color:#888888;
      &:hover{
        color:$red;
      }
    }
  }
}
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
